<template>
  <div class="cart-index">
    <NavBar :editing="editing" @editFn="editing = !editing" />
    <Lists
      :lists="lists"
      :editing="editing"
      @changeNumber="changeNumber"
      @tijiao="tijiao"
      @del="del"
      v-if="isLogin"
    />
    <!-- 未登录 -->
    <div class="login tac mt-30" v-else>
      <img
        class="img"
        src="https://img01.yzcdn.cn/vant/empty-image-default.png"
        alt=""
      />
      <div class="f14">
        <span class="f999">您还没登录，</span>
        <router-link to="/login" class="base">去登陆</router-link>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Footer from "@components/Footer.vue";
import NavBar from "@view/Cart/child/navBar.vue";
import Lists from "@/view/Cart/child/lists.vue";
import { mapState } from "vuex";
// axios
// import { getCartLists, changeNumber, del } from "@/api/cart";
// import { createPreOrder } from "@/api/preOrder";
import { get, post } from "@/request/index";
// import {}
export default {
  name: "cart",
  data() {
    return {
      lists: [],
      // 默认不编辑
      editing: true,
    };
  },
  created() {
    this.getCartLists();
  },
  components: {
    Footer,
    NavBar,
    Lists,
  },
  methods: {
    getCartLists() {
      get("/cart/all")
        .then((res) => (this.lists = res.list))
        .catch((err) => console.log("获取cart列表失败", err));
    },
    changeNumber(value, index) {
      console.log(this.lists[index].cartId, value);
      let obj = {
        cartId: this.lists[index].cartId,
        buyNum: value,
      };
      get("/cart/updateNum", obj)
        .then((res) => (this.lists[index].buyNum = value))
        .catch((err) => console.log("修改商品数量失败", err));
    },

    // 结算和删除
    del(result) {
      console.log(1);
      let obj = { cartId: result };
      post("/cart/del", obj)
        .then((res) => {
          // 当cartId不一样时，留下

          let newList = this.lists.filter((item) => {
            return !result.includes(item.cartId);
          });
          this.lists = newList;
        })
        .catch((err) => console.log("删除失败", err));

      // del(result)
      //   .then((res) => {
      //     // 当cartId不一样时，留下

      //     let newList = this.lists.filter((item) => {
      //       return !result.includes(item.cartId);
      //     });
      //     this.lists = newList;
      //   })
      //   .catch((err) => {
      //     console.log("删除失败", err);
      //   });
    },
    tijiao(price, cartId) {
      post("/preOrder/create", { totalMoney: price, cartId })
        .then((res) => {
          console.log("创建预订单");
          console.log(res);
          this.$router.push({
            path: "/order/preOrder",
            query: { preOrderId: res.result.preOrderId },
          });
        })
        .catch((err) => console.log("创建预订单失败", err));
    },
  },
  computed: {
    ...mapState(["isLogin"]),
  },
};
</script>

<style lang="less">
@import "./cart.less";

/* 未登录 */
.login {
  .img {
    width: 160px;
    height: 160px;
  }
}
</style>